<template>
	<view>
		<view class="box_1">您最多可以添加10个特长标签，还可以添加自定义标签哦</view>
		<view class="box_2">
			<view :class="item.select ? 'tag-item select' : 'tag-item'" v-for="(item, index) in loopTags" :key="index" @click="tagClick(item)">
				{{ item.text }}
			</view>
		</view>
		<view class="clear"></view>
		<view class="box_3">
			<view class="add_self_tag" @click="handleCustom">自定义</view>
		</view>
		<view style="margin: 16px 16px 0;">
			<u-button shape="circle" :disabled="disabled" type="primary" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<!-- <u-modal   title="添加自定义标签" show-cancel-button @confirm="handleConfirm"> -->
			
			
			<view v-if="showCustom" class="op">
			  <view>
				<view class="model-wrapper">
					<view class="model-title">
						添加自定义标签
					</view>
					<view class="model-content">
						<view class="content-msg">
							<view class="box_4">
								<view class="self_input u-border-bottom">
									<label>
										<input placeholder-style="color:#757575;font-size:12px !important;"  type="text" v-model="customText" maxlength="5" placeholder="请输入标签内容(最多5个字)" />
									</label>
								</view>
							</view>
						</view>
					</view>
					<view class="model-footer u-border-top">
						<view class="model-footer-button u-border-right"  @click="showCustom=false">
							取消
						</view>
						<view class="model-footer-button" style="color: rgb(41, 121, 255);" @click="handleConfirm">
							确认
						</view>
					</view>
				</view>
			  </view>
			</view>
			
		<!-- </u-modal> -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'EditTags',
		data() {
			return {
				showCustom: false,
				selectedTags: [],
				loopTags: [],
				customText: '',
				disabled:false
			}
		},
		async created() { 
			await this.$store.dispatch('getClassify', 'resumeTag')
		},
		watch:{
			tagList(val){
				if(val.length>0){
					this.loopTags = val
					// 重构数据
					this.loopTags = this.loopTags.map((item) =>{
						return {
							id: item.id,
							text: item.text,
							select: false 
						}
					})
					
					this.loopTags = this.loopTags.map((item)=> {
						let thisIndex =  this.basicStore.tag.findIndex(val => parseInt(item.id) === parseInt(val))
						return {
							id: item.id,
							text: item.text,
							select: thisIndex > -1
						}
					})
					// 恢复自定义标签
					 this.basicStore.tag.forEach((item)=> {
						// 自定义标签无id
						if (!parseInt(item)) {
							this.loopTags.push({
								id: '',
								text: item,
								select: true
							})
						}
					})
					
					this.syncSelectedTag()
				}
			}
		},
		mounted() {
			this.loopTags = this.tagList
		},
		computed: {
			tagList() {
				return this.$store.state.classifyResumeTag
			},
			basicStore() {
				return this.$store.state.resume.basic
			}
		},
		methods: {
			// 同步已选中标签
			syncSelectedTag() {
				this.selectedTags = this.loopTags.filter(item => item.select)
			},
			// 添加自定义标签
			handleCustom() {
				// 判断选中特长标签的数量
				if (this.selectedTags.length >= 10) {
					this.$refs.uTips.show({
						title: '您最多可以选择10个特长标签',
						type: 'warning'
					})
					return false
				} else {
					this.showCustom = !this.showCustom
				}
			},
			// 自定义标签确定
			handleConfirm() {
				this.loopTags.push({
					id: '',
					text: this.customText,   
					select: true
				})
				this.showCustom = false
				this.customText = ''
				this.syncSelectedTag()
			},
			// 选择标签
			tagClick(data) {
				// 判断选中特长标签的数量
				if (!data.select && this.selectedTags.length >= 10) {
					this.$refs.uTips.show({
						title: '您最多可以选择10个特长标签',
						type: 'warning'
					})
					return false
				}
				this.loopTags = this.loopTags.map(function(item) {
					let isSelect = false
					if (data.id) {
						isSelect = parseInt(item.id) === parseInt(data.id) ? !item.select : item.select
					} else {
						isSelect = item.text === data.text ? !item.select : item.select
					}
					return {
						id: item.id,
						text: item.text,
						select: isSelect
					}
				})
				this.syncSelectedTag()
			},
			// 保存
			handleSubmit() {
				let submitTag = []
				this.selectedTags.forEach(function(item) {
					if (item.id) {
						submitTag.push(item.id)
					} else {
						submitTag.push(item.text)
					}
				})
				this.disabled = true
				http
					.post(api.resume_tag_save, {
						tag: submitTag
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
						this.disabled = false
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.op{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 10000;
	}
	
	.model-wrapper{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 520rpx;
		height: auto;
		z-index: 10075;
		margin-top: 0rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #fff;
	}
	
	.model-title{
		padding-top: 38rpx;
		font-weight: 500;
		text-align: center;
		color: #303133;
	}
	.model-content{
		.content-msg{
			padding: 38rpx;
			font-size: 24rpx;
			color: #606266;
			position: relative;
		}
	}
	.model-footer{
		display: flex;
		.model-footer-button{
			flex: 1;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			cursor: pointer;
			text-align: center;
			border-radius: 2rpx;
		}
	}
	
	.box_4 {
		margin: 0 auto;
		// padding: 20rpx 0 30rpx;
		.self_input {
			input {
				border: 0;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
				color: #333333;
				width: 100%;

				&::placeholder {
					color: #c9c9c9;
				}
			}
		}
	}

	.box_3 {
		padding: 0 30rpx;

		.add_self_tag {
			font-size: 24rpx;
			color: #1787fb;
			border: 2rpx solid #1787fb;
			display: inline-block;
			padding: 14rpx 30rpx 14rpx 64rpx;
			background-image: $add_ico_blue;
			background-color: #f4f9ff;
			background-position: 30rpx center;
			background-repeat: no-repeat;
			background-size: 28rpx;
			border-radius: 52rpx;
		}
	}

	.box_2 {
		padding: 20rpx 30rpx 0 30rpx;

		.tag-item {
			&.select {
				background-color: #f4f9ff;
				color: #1787fb;
			}

			float: left;
			padding: 14rpx 24rpx;
			font-size: 24rpx;
			color: #999999;
			margin: 0 20rpx 20rpx 0;
			background-color: #f3f3f3;
			border-radius: 52rpx;
		}
	}

	.box_1 {
		width: 100%;
		font-size: 26rpx;
		color: #c9c9c9;
		padding: 30rpx 32rpx;
	}
</style>
